<!--
 * @Author: your name
 * @Date: 2021-08-05 09:23:22
 * @LastEditTime: 2021-08-10 11:32:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-group-ui\src\views\JZList.vue
-->
<template>
    <div class="JZList">
     <!-- 头部 -->
     <Header></Header>
     <!-- 头部 -->
     <!-- 体部 -->
     <div class="content">
         <div class="wrapper">
             <div class="activrle_content" v-if="article">
                 <div class="head" ><a @click="tojz">当前位置：晋中</a>&nbsp;&nbsp;>&nbsp;&nbsp;<a  @click="tomore(article.category.id,article.category.name)">{{article.category.name?article.category.name:'无'}}</a></div>
                 <div class="title">{{article.title}}
             </div>
             <div class="info">
                作者：{{article.baseUser?article.baseUser.realname:'匿名'}}&nbsp;&nbsp;&nbsp;
                发布时间：{{article.publishTime | fmtDate}}&nbsp;&nbsp;&nbsp;
                阅读次数：{{article.readTimes}}
             </div>
             <el-divider></el-divider>
             <div class="listconte" v-html="article.content"></div>
         </div>
        </div>
     </div>
     <!-- /体部 -->
     <!-- 底部 -->
     <Footer></Footer>
     <!-- /底部 -->
    </div>
</template>
<script>
import { get } from '../utils/request'
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
    components: {
    Header,
    Footer,
  },
    data(){
    return{
        id:0,
        article:'',
        loading:false,
        }
    },
    created(){
        this.id=this.$route.query.id;
        this.loadArticle()
        },
        methods:{
            tojz(){
                this.$router.push({path:'/jz'})
            },
            tomore(id,name){
                this.$router.push({path:'/more',query:{id,name}})
            },
            loadArticle(){
                this.loading = true;
              let url="/index/article/findById"
              get(url,{id:this.id})
            .then(res => {
                this.article=res.data;
            }).finally(()=> {
           this.loading = false;
          })
            }
        }
    }
</script>
<style lang="scss" scoped>
.JZList{
    min-height: 1200px;
.content{
    .wrapper{
        .activrle_content{
            .head{
                background-color: #fafafa;
                color:#999;
                font-size: 12px;
                padding-left: 15px;
                margin: 10px auto 0 auto;
                cursor: pointer;
            }
            .title{
                font-size: 30px;
                font-weight: normal;
                text-align: center;
                padding: 5px 0 12px 0;
                cursor: pointer;
            }
        .info{
                padding: 0 0 1em;
                width: 80%;
                margin: 0 auto;
                border-bottom: 1px solid #fff;
                margin-bottom: .1em;
                text-align: center;
            }
            .listconte {
                padding: 0 1em;
                font-size: 18px;
                line-height: 36px
            }
        }
    }
}
}
</style>